<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>welcome</title>
    <style>
        .pointBut{
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="wu-welcome">
    <div class="main-content">
        <div class="wrapper">
            <div class="row state-overview">
                <div class="col-lg-3 col-sm-6">
                    <section class="panel">
                        <div class="symbol yellow">
                            <i class="icon iconfont icon-dingdandaifukuan"></i>
                        </div>
                        <div class="value pointBut" id="welcome-serviceOrderTotal-url"
                             onclick="Hui_admin_tab(this)" >
                            <h1 class=" count3" id="welcome-serviceOrderTotal">
                                0
                            </h1>
                            <p>订单总数</p>
                        </div>
                    </section>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <section class="panel">
                        <div class="symbol blue">
                            <i class="icon iconfont icon-liulan"></i>
                        </div>
                        <div class="value pointBut" id="welcome-serviceOrderToday-url"
                             onclick="Hui_admin_tab(this)" >
                            <h1 class=" count4" id="welcome-serviceOrderToday">
                                0
                            </h1>
                            <p>当日订单</p>
                        </div>
                    </section>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <section class="panel">
                        <div class="symbol terques">
                            <i class="icon iconfont icon-shangjia"></i>
                        </div>
                        <div class="value pointBut" id="welcome-userOrCustCard-url"
                             onclick="Hui_admin_tab(this)" >
                            <h1 class="count" id="welcome-userOrCustCard">
                                0
                            </h1>
                            <p id="welcome-userOrCustCardChar">总数</p>
                        </div>
                    </section>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <section class="panel">
                        <div class="symbol red">
                            <i class="icon iconfont icon-jichuxinxi"></i>
                        </div>
                        <div class="value pointBut" id="welcome-bizOrShop-url"
                             onclick="Hui_admin_tab(this)" >
                            <h1 class=" count2" id="welcome-bizOrShop">
                                0
                            </h1>
                            <p id="welcome-bizOrShopChar">总数</p>
                        </div>
                    </section>
                </div>
            </div>
            <div class="row mb-20">
                <div class="col-lg-6">
                    <div style="background: white;border-radius: 4px;-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);box-shadow: 0 1px 1px rgba(0,0,0,.05);">
                        <div id="p-chart" style="width: 100%;height: 380px"></div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div style="background: white;border-radius: 4px;-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);box-shadow: 0 1px 1px rgba(0,0,0,.05);">
                        <div id="p-chart2" style="width: 100%;height: 380px"></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-5">
                    <!--user info table start-->
                    <section class="panel">
                        <div class="panel-body">
                            <a href="http://blog.exrick.cn" target="_blank" class="task-thumb">
                                <img width="120px" height="83px" src="../static/RT/img/wash1.jpg" alt=""
                                     th:src="@{/static/RT/img/wash1.jpg}">
                            </a>
                            <div class="task-thumb-details">
                                <h1><a href="http://blog.exrick.cn" target="_blank">麦迪斯洗车</a></h1>
                                <p>洗车门店</p>
                            </div>
                        </div>
                        <table class="table table-hover personal-task t1">
                            <tbody>
                            <tr>
                                <td>
                                    <i class=" icon-tasks"></i>
                                </td>
                                <td>
                                    <a target="_blank" href="http://blog.exrick.cn/intro/">
                                        公司介绍
                                    </a>
                                    <a target="_blank" href="http://blog.exrick.cn/">
                                        门店地址
                                    </a>
                                </td>
                                <td><span style="margin-top: -1px"
                                          class="label label-primary pull-right r-activity">02</span></td>
                            </tr>
                            <tr>
                                <td>
                                    <i class=" icon-music"></i>
                                </td>
                                <td>
                                    <a target="_blank" href="http://music.163.com/#/user/home?id=51835343">
                                        商户活动
                                    </a>
                                </td>
                                <td><span style="margin-top: -1px"
                                          class="label label-info pull-right r-activity">01</span></td>
                            </tr>
                            <tr>
                                <td>
                                    <i class="icon-envelope"></i>
                                </td>
                                <td>
                                    <a href="mailto:1012139570@qq.com" target="_blank">麒麟街道悦民路133号银河湾花园商铺7-101</a>
                                </td>
                                <td><span style="margin-top: -1px"
                                          class="label label-warning pull-right r-activity">01</span></td>
                            </tr>
                            <tr>
                                <td>
                                    <i class=" icon-bell-alt"></i>
                                </td>
                                <td>
                                    <a target="_blank" href="javascript:;">
                                        最新活动
                                    </a>
                                    <a target="_blank" href="javascript:;">

                                    </a>
                                </td>
                                <td><span style="margin-top: -1px"
                                          class="label label-success pull-right r-activity">02</span></td>
                            </tr>
                            </tbody>
                        </table>
                    </section>
                    <!--user info table end-->
                </div>
                <div class="col-lg-7">
                    <!--历史订单查询-->
                    <section class="panel">
                        <div class="panel-body progress-panel">
                            <div class="task-progress">
                                <h1>历史订单</h1>
                                <p>门店一</p>
                            </div>
                            <div class="task-option">
                                <select class="styled">
                                    <option>门店一</option>
                                    <option>门店二</option>
                                    <option>门店三</option>
                                    <option>门店四</option>
                                    <option>门店五</option>
                                </select>
                            </div>
                        </div>
                        <table class="table table-hover personal-task">
                            <thead>
                            <tr>
                                <th>订单号</th>
                                <th>姓名</th>
                                <th>订单类型</th>
                                <th>金额</th>
                                <th>支付方式</th>
                                <th>车牌号</th>
                                <th>下单时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>212529448</td>
                                <td>吴文玉</td>
                                <td>洗车</td>
                                <td>288</td>
                                <td>微信</td>
                                <td>苏E5555</td>
                                <td>2018-04-19 10:47:34</td>
                            </tr>
                            <tr>
                                <td>212529448</td>
                                <td>吴文玉</td>
                                <td>洗车</td>
                                <td>288</td>
                                <td>微信</td>
                                <td>苏E5555</td>
                                <td>2018-04-19 10:47:34</td>
                            </tr>
                            <tr>
                                <td>212529448</td>
                                <td>吴文玉</td>
                                <td>洗车</td>
                                <td>288</td>
                                <td>微信</td>
                                <td>苏E5555</td>
                                <td>2018-04-19 10:47:34</td>
                            </tr>
                            <tr>
                                <td>212529448</td>
                                <td>吴文玉</td>
                                <td>洗车</td>
                                <td>288</td>
                                <td>微信</td>
                                <td>苏E5555</td>
                                <td>2018-04-19 10:47:34</td>
                            </tr>
                            <tr>
                                <td>212529448</td>
                                <td>吴文玉</td>
                                <td>洗车</td>
                                <td>288</td>
                                <td>微信</td>
                                <td>苏E5555</td>
                                <td>2018-04-19 10:47:34</td>
                            </tr>
                            <tr>
                                <td>212529448</td>
                                <td>吴文玉</td>
                                <td>洗车</td>
                                <td>288</td>
                                <td>微信</td>
                                <td>苏E5555</td>
                                <td>2018-04-19 10:47:34</td>
                            </tr>
                            </tbody>
                        </table>
                    </section>
                    <!--work progress end-->
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8">
                    <!--timeline start-->
                    <section class="panel">
                        <div class="panel-body">
                            <div class="text-center mbot30">
                                <h3 class="timeline-title">麦迪斯平台更新日志</h3>
                                <p class="t-info">This is a project timeline</p>
                            </div>

                            <div class="timeline">
                                <article class="timeline-item">
                                    <div class="timeline-desk">
                                        <div class="panel">
                                            <div class="panel-body">
                                                <span class="arrow"></span>
                                                <span class="timeline-icon red"></span>
                                                <span class="timeline-date">11:25 am</span>
                                                <h1 class="red">22 Oct | Sunday</h1>
                                                <p>待更新</p>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                                <article class="timeline-item alt">
                                    <div class="timeline-desk">
                                        <div class="panel">
                                            <div class="panel-body">
                                                <span class="arrow-alt"></span>
                                                <span class="timeline-icon green"></span>
                                                <span class="timeline-date">17:00 pm</span>
                                                <h1 class="green">22 Oct | Sunday</h1>
                                                <p><a href="http://blog.exrick.cn" target="_blank">中汇</a> 完成目前所有功能开发
                                                    <span><a href="javascript:;" class="green"
                                                             target="_blank">v1.0发布</a></span></p>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                                <article class="timeline-item">
                                    <div class="timeline-desk">
                                        <div class="panel">
                                            <div class="panel-body">
                                                <span class="arrow"></span>
                                                <span class="timeline-icon blue"></span>
                                                <span class="timeline-date">11:35 pm</span>
                                                <h1 class="blue">13 Oct | Friday</h1>
                                                <p><a href="javascript:;" target="_blank">中汇</a> 完成后端接口改造二次开发 <span><a
                                                        class="blue" href="javascript:;" target="_blank">XMall-Front</a></span>
                                                </p>
                                                <div class="album">
                                                    <a href="javascript:;">
                                                        <img alt="" width="48px" height="32px"
                                                             src="http://oweupqzdv.bkt.clouddn.com/QQ%E6%88%AA%E5%9B%BE20170915134720.png">
                                                    </a>
                                                    <a href="javascript:;">
                                                        <img alt="" width="48px" height="32px"
                                                             src="http://oweupqzdv.bkt.clouddn.com/QQ%E6%88%AA%E5%9B%BE20170925230559.png">
                                                    </a>
                                                    <a href="javascript:;">
                                                        <img alt="" width="48px" height="32px"
                                                             src="http://oweupqzdv.bkt.clouddn.com/QQ%E6%88%AA%E5%9B%BE20170915135622.png">
                                                    </a>
                                                    <a href="javascript:;">
                                                        <img alt="" width="48px" height="32px"
                                                             src="http://oweupqzdv.bkt.clouddn.com/QQ%E6%88%AA%E5%9B%BE20171022112023.jpg">
                                                    </a>
                                                    <a href="javascript:;">
                                                        <img alt="" width="48px" height="32px"
                                                             src="http://oweupqzdv.bkt.clouddn.com/QQ%E6%88%AA%E5%9B%BE20171022112048.jpg">
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                                <article class="timeline-item alt">
                                    <div class="timeline-desk">
                                        <div class="panel">
                                            <div class="panel-body">
                                                <span class="arrow-alt"></span>
                                                <span class="timeline-icon purple"></span>
                                                <span class="timeline-date">3:00 pm</span>
                                                <h1 class="purple">14 Sep | Saturday</h1>
                                                <p>
                                                    完成 <a href="javascript:;" target="_blank">麦迪斯小程序</a> 的UI设计，
                                                    <a href="javascript:;" target="_blank">项目需求分析</a>
                                                </p>
                                                <div class="notification">
                                                    <i class=" icon-exclamation-sign"></i> 启动了前台项目
                                                    <a href="javascript:;" target="_blank">麦迪斯</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                                <article class="timeline-item">
                                    <div class="timeline-desk">
                                        <div class="panel">
                                            <div class="panel-body">
                                                <span class="arrow"></span>
                                                <span class="timeline-icon light-green"></span>
                                                <span class="timeline-date">09:00 pm</span>
                                                <h1 class="light-green">28 July | Friday</h1>
                                                <p><a href="javascript:;" target="_blank">中汇</a> 启动了
                                                    <span><a href="javascript:;" target="_blank" class="light-green">麦迪斯平台</a></span>
                                                    项目，并完成第一次提交</p>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            </div>

                            <div class="clearfix">&nbsp;</div>
                        </div>
                    </section>
                    <!--timeline end-->
                </div>
                <div class="col-lg-4">

                    <!--weather statement start-->
                    <section class="panel">
                        <div class="weather-bg">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-xs-6">
                                        <i id="weather" class="icon iconfont icon-icon-"></i>
                                        <span id="city">南京</span>
                                    </div>
                                    <div class="col-xs-6">
                                        <div class="degree">
                                            <span id="degree">28℃</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <footer class="weather-category">
                            <ul>
                                <li class="active">
                                    <h5>湿度</h5>
                                    <span id="humidity">湿度：45%</span>
                                </li>
                                <li>
                                    <h5>空气质量</h5>
                                    <span id="airCondition">良</span>
                                </li>
                                <li>
                                    <h5>风力</h5>
                                    <span id="wind">东南风2级</span>
                                </li>
                            </ul>
                        </footer>
                    </section>
                    <!--weather statement end-->
                </div>
                <div class="col-lg-4">
                    <!--latest product info start-->
                    <section class="panel post-wrap pro-box">
                        <aside>
                            <div class="post-info">
                                <span class="arrow-pro right"></span>
                                <div class="panel-body">
                                    <h1><strong>popular</strong> <br> 本周热门活动</h1>
                                    <div class="desk yellow">
                                        <h3 id="hot-title">活动名称</h3>
                                        <p>共达成 <span id="hot-num">650</span> 笔订单</p>
                                    </div>
                                    <div class="post-btn">
                                        <a href="javascript:;">
                                            <i class="icon-chevron-sign-left"></i>
                                        </a>
                                        <a href="javascript:;">
                                            <i class="icon-chevron-sign-right"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </aside>
                        <aside class="post-highlight yellow v-align">
                            <div class="panel-body text-center">
                                <div class="pro-thumb">
                                    <img id="hot-img" width="112px" height="112px" src="../static/RT/icon/none.png"
                                         alt="" th:src="@{/static/RT/icon/none.png}">
                                </div>
                            </div>
                        </aside>
                    </section>
                    <!--latest product info end-->
                    <!--twitter feedback start-->
                    <section class="panel post-wrap pro-box">
                        <aside>
                            <div class="post-info">
                                <span class="arrow-pro left"></span>
                                <div class="panel-body">
                                    <div class="text-center twite">
                                        <h1>Follow Me</h1>
                                    </div>

                                    <footer class="social-footer">
                                        <ul>
                                            <li>
                                                <a href="https://github.com/Exrick" target="_blank">
                                                    <i class="icon-github"></i>
                                                </a>
                                            </li>
                                            <li class="active">
                                                <a target="_blank"
                                                   href="http://wpa.qq.com/msgrd?v=3&uin=1012139570&site=qq&menu=yes">
                                                    <img style="margin-bottom: 3px" width="24px" height="24px"
                                                         src="../static/RT/icon/qq.png"
                                                         th:src="@{/static/RT/icon/qq.png}">
                                                </a>
                                            </li>
                                            <li>
                                                <a target="_blank" href="https://space.bilibili.com/22701144/#!/">
                                                    <img style="margin-bottom: 5px" width="22px" height="22px"
                                                         src="../static/RT/icon/bilibili.png"
                                                         th:src="@{/static/RT/icon/bilibili.png}">
                                                </a>
                                            </li>
                                            <li>
                                                <a href="http://blog.exrick.cn/" target="_blank">
                                                    <i class="icon-pinterest"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </footer>
                                </div>
                            </div>
                        </aside>
                    </section>
                    <!--twitter feedback end-->
                </div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript">
    //首页
    var welcomeFun;

    welcomeFun = {
        init: function () {
            let _this = this;
            _this.loadOrderNum();
            _this.loadAllOrderNum();
            _this.loadUser();
            _this.loadBizShop();

            //页面加载完成后初始化select2控件
          /*  Highcharts.chart('p-chart', {
                chart: {
                    type: 'column'
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: '一周内新增用户/技师'
                },
                subtitle: {
                    text: '模拟数据'
                },
                xAxis: {
                    categories: [
                        '周一', '周二', '周三', '周四', '周五', '周六', '周日'
                    ],
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '增加人数'
                    }
                },
                tooltip: {
                    // head + 每个 point + footer 拼接成完整的 table
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:1f} 人</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '新增用户',
                    data: [9, 7, 10, 12, 14, 13, 18]
                }, {
                    name: '新增技师',
                    data: [2, 3, 5, 3, 4, 1, 7]
                }]
            });
            Highcharts.chart('p-chart2', {
                chart: {
                    type: 'column'
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: '一周内新增门店/商户/城市'
                },
                subtitle: {
                    text: '模拟数据'
                },
                xAxis: {
                    categories: [
                        '周一', '周二', '周三', '周四', '周五', '周六', '周日'
                    ],
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '增加个数'
                    }
                },
                tooltip: {
                    // head + 每个 point + footer 拼接成完整的 table
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:1f} 个</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '新增门店',
                    data: [5, 7, 11, 9, 7, 10, 15]
                }, {
                    name: '新增商户',
                    data: [2, 3, 5, 3, 4, 1, 7]
                }, {
                    name: '新增城市',
                    data: [1, 3, 2, 6, 2, 3, 1]
                }]
            });*/
          let myChart =  echarts.init($("#p-chart")[0]),
              myChart2 = echarts.init($("#p-chart2")[0]);
            option = {
                title: {
                    text: '一周内新增用户/技师',
                    top: 10,
                    left : 10
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['新增用户','新增技师'],
                    bottom : 10,
                    selectedMode: 'single'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: 50,
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一','周二','周三','周四','周五','周六','周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name:'新增用户',
                        type:'line',
                        stack: '总量',
                        data:[320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name:'新增技师',
                        type:'line',
                        stack: '总量',
                        data:[820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            };
            option2 = {
                title: {
                    text: '一周内新增门店/商户/城市',
                    top: 10,
                    left : 10
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['新增门店','新增商户','新增城市'],
                    bottom : 10,
                    selectedMode: 'single'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: 50,
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一','周二','周三','周四','周五','周六','周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name:'新增门店',
                        type:'line',
                        stack: '总量',
                        data:[120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name:'新增商户',
                        type:'line',
                        stack: '总量',
                        data:[220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name:'新增城市',
                        type:'line',
                        stack: '总量',
                        data:[150, 232, 201, 154, 190, 330, 410]
                    }
                ]
            };
            myChart.setOption(option);
            myChart2.setOption(option2);
            myChart.on('legendselectchanged', function (params) {
                myChart.setOption({
                    title : {
                        text: '一周内'+params.name+'统计',
                    }
                })
            });
            myChart2.on('legendselectchanged', function (params) {
                myChart2.setOption({
                    title : {
                        text: '一周内'+params.name+'统计',
                    }
                })
            });
        },
        //加载当日订单
        loadOrderNum: function () {
            $.ajax({
                type: "get",
                url: "cust/getCustServiceOrderNum",
                dataType: "json",
                success: function (json) {
                    $("#welcome-serviceOrderToday").text(json.num);
                },
                error: function () {
                    alert("error");
                }
            });
        },
        //加载所有订单
        loadAllOrderNum: function () {
            let _this = this;
            $.ajax({
                type: "get",
                url: "cust/getAllServiceOrderNum",
                dataType: "json",
                success: function (json) {
                    $("#welcome-serviceOrderTotal").text(json.num);
                    _this.loadUrl();
                },
                error: function () {
                    alert("error");
                }
            });
        },
        //加载用户数，会员数
        loadUser: function () {
            $.ajax({
                type: "get",
                url: "cust/getUserOrCustCard",
                dataType: "json",
                success: function (json) {
                    $("#welcome-userOrCustCard").text(json.num);
                    $("#welcome-userOrCustCardChar").text(json.title);
                },
                error: function () {
                    alert("error");
                }
            });
        },
        //加载商户数，门店数
        loadBizShop: function () {
            $.ajax({
                type: "get",
                url: "biz/getShopsNumByBizId",
                dataType: "json",
                success: function (json) {
                    $("#welcome-bizOrShop").text(json.num);
                    $("#welcome-bizOrShopChar").text(json.title);
                },
                error: function () {
                    alert("error");
                }
            });
        },
        loadUrl: function () {
            $("#welcome-serviceOrderTotal-url").attr({"data-title":"会员订单查询","data-href":"merchant/member/orderQuery.html"});
            $("#welcome-serviceOrderToday-url").attr({"data-title":"会员订单查询","data-href":"merchant/member/orderQuery.html"});
            $("#welcome-userOrCustCard-url").attr({"data-title":"商户会员查询","data-href":"merchant/member/memberQuery.html"});
            $("#welcome-bizOrShop-url").attr({"data-title":"门店管理","data-href":"merchant/store/manage.html"});

        }
    };

    welcomeFun.init();
</script>
</body>
</html>